
<!DOCTYPE html>
<html>

<head>
    <title>海绵城市-Demo</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name='viewport' content='width=device-width,user-scalable=no'>
    <!-- <script src="https://cdn.bootcss.com/FileSaver.js/1.3.3/FileSaver.min.js"></script> -->
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }

        .formpane {
            top: 10px;
            right: 10px;
            /* background: rgba(230, 230, 230, 0.85); */
        }

        .railLine {
            top: 10px;
            left: 10px;
            width: 170px;
            height: 200px;
        }

    </style>

    <script>
        window.htconfig = {
            Default: {
                // isTouchable: false,
                convertURL: function (url) {
                    var prefix = ''
                    if (url && !/^data:image/.test(url) && !/^http/.test(url) && !/^https/.test(url)) {
                        if (/\.json$/.test(url)) {
                            return prefix + url + '?' + new Date().getTime();
                        } else {
                            return prefix + url;
                        }
                    }
                    return url
                }
            },
            Style: {
                'select.width': 0,
                'alphaTest': 0.8,
            }
        };

    </script>

    <script src="script/ht.js"></script>
    <script src='script/ht-animation.js'></script>
    <script src='script/ht-obj.js'></script>
    <!-- <script src="http://www.hightopo.com/guide/lib/core/ht.js"></script>
    <script src='http://www.hightopo.com/guide/lib/plugin/ht-animation.js'></script>
    <script src='http://www.hightopo.com/guide/lib/plugin/ht-obj.js'></script> -->
    <!-- <script src='libs/ht.js'></script>
    <script src='libs/ht-animation.js'></script>
    <script src='libs/ht-obj.js'></script> -->
    <script src='script/display.js'></script>
    <script type="text/javascript" src="script/wushui.js"></script>

    <script>
        function init() {

        let displayUrl = 'displays/站点/污水系统.json'
        let fitContent = true

        let graphView = new ht.graph.GraphView();
        let dataModel = graphView.dm(); //new ht.DataModel();
        graphView.addToDOM()


        dataModel.enableDataBindings()
        dataModel.enableAnimat()

        graphView.setMovableFunc(function (data) {
            return false
        });
        graphView.enableEvent()

        // wushui

         let json = ht.Default.parse(wushui);
            dataModel.deserialize(json)
            // dataModel.initFunc(graphView)// 初始化函数
            // dataModel.initDataSource() // 数据源
            if (fitContent) {
                graphView.fitContent(true, 20);
                window.addEventListener('resize', function () {
                    graphView.fitContent(true, 20);
                }, false);
            }

            return false;
        ht.Default.xhrLoad(displayUrl, function (text) {

            let json = ht.Default.parse(text);
            dataModel.deserialize(json)

            // dataModel.initFunc(graphView)// 初始化函数
            // dataModel.initDataSource() // 数据源

            if (fitContent) {
                graphView.fitContent(true, 20);
                window.addEventListener('resize', function () {
                    graphView.fitContent(true, 20);
                }, false);
            }
        });
        }
    </script>
</head>

<body onload="init()">
</body>

</html>
